import React from "react";
import "./App.css";
import Callback from "./pages/Callback";
import Cat from "./pages/Cat";
import Context from "./pages/Context";
import Dom from "./pages/Dom";
import ImparativeHandle from "./pages/ImparativeHandle";
import LayoutEffect from "./pages/LayoutEffect";

import Memo from "./pages/Memo";
import Mouse from "./pages/Mouse";
import Reducer from "./pages/Reducer";
import Ref from "./pages/Ref";

function App() {
  return (
    <div style={{ height: "100%" }}>
      <div>render prop</div>
      <Mouse
        render={(mouse) => (
          <h1>
            The mouse position is ({mouse.x}, {mouse.y})
          </h1>
        )}
      />
      <Cat
        render={(status) => (
          <h1>{status ? "this is cat 1.1" : "this is cat 1.2"}</h1>
        )}
      />
      <Cat
        render={(status) => (
          <h1>{status ? "this is cat 2.1" : "this is cat 2.2"}</h1>
        )}
      />
      <div>useContext</div>
      <Context />
      <div>useReducer</div>
      <Reducer count={0} />
      <div>useCallback</div>
      <Callback />
      <div>useMemo</div>
      <Memo />
      <div>useRef</div>
      <Ref></Ref>
      <div>useImparativeHandle</div>
      <ImparativeHandle />
      <div>useLayoutEffect</div>
      <LayoutEffect />
      <div>Dom</div>
      <Dom />
    </div>
  );
}

export default App;
